<template>
    <div class="hot">
      <dl>
        <dt>
          <ul class="flexX top">
            <li><img src="@/assets/img/hot/hot.png" alt="hot"> 本周热门榜单</li>
            <li class="last">全部榜单 <span class="iconfont">&#xe62e;</span></li>
          </ul>
        </dt>
        <dd class="listdad clearfix flexX">
          <dl class="list" v-for="item in hot" :key="item.id" @click="goHotDetails">
            <dt><img v-if="item.logoUrl" class="img" :src="item.logoUrl" alt="hot"><img class="imgs" :src="item.imgUrl" :alt="item.fonts"></dt>
            <dd class="fonts">{{ item.fonts }}</dd>
            <dd class="reddad"><span class="red">￥{{ item.money }}</span>起</dd>
          </dl>
        </dd>
      </dl>
    </div>
</template>

<script>
    export default {
        props: ["hot"],
        data(){
          return{
          }
        },
        methods:{
          goHotDetails(){
            this.$router.push("/hotdetails")
          }
        }
    }
</script>

<style scoped lang="stylus">
  @import "~css/common.styl"
  .hot {
    margin-top: .2rem;
    background: #ffffff;
  }
  .top {
    padding: .2rem;
    font-size: .32rem;
    color: #212121;
  }
  .top img {
    height: .3rem;
    width: .3rem;
  }
  .top .last {
    color: #616161;
    font-size: .24rem;
  }
  .list dt {
    position: relative;
    width: 2rem;
  }
  .list dt .img {
    position: absolute;
    vertical-align: top;
    top: -0.05rem;
    left: 0;
    width: .84rem;
    height: .4rem;
  }
  .list dd {
    font-size: .24rem;
    text-align: center;
    color: #212121;
    margin-top: .1rem;
  }
  .listdad {
    overflow-X: scroll;
    white-space: nowrap;
  }
  .list {
    width: 2rem;
    margin: .2rem;
  }
  .list .fonts {
    $txtH();
  }
  .list .imgs{
    width: 2rem;
    height: 2rem
  }
  .list .reddad {
    color: #616161;
  }
  .list .reddad .red {
    color: #ff8300;
    font-size: .28rem;
  }
</style>
